<template>
    <div>
        <div class="box">

            <div class="Header">
                <div class="nav-item" @click="findAll">全部</div>
                <div class="nav-item" v-for="(item, index) in categoryList" :key="index" @click="findById(item.id)">{{
                    item.name }}</div>
                <!-- <div class="nav-item">服装</div>
            <div class="nav-item">运动器材</div>
            <div class="nav-item">手机数码</div> -->
                <div class="nav-item nav-post" @click="publishPost">发布帖子</div>
            </div>

            <div class="separator"></div>

            <div class="item" v-for="(item, index) in postList" :key="index" @click="gotoTheDetail(item.id)">
                <div class="item-l" v-if="item.pic">
                    <img :src="item.pic" alt="商品图片" class="item-img">
                </div>
                <div class="item-l" v-else>
                    <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.81XR5IZQy_j31NZvaXSJIAAAAA?w=141&h=189&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                        alt="" class="item-img">
                </div>
                <div class="item-r">
                    <p class="title">{{ item.title }}</p>
                    <p class="comments">发布者：{{ item.nickName }}</p>
                    <p class="time">发布时间：{{ item.postTime.slice(0, 10) }}</p>
                    <p class="views">浏览量：{{ item.viewCount }}</p>
                    <p class="likes">点赞量：{{ item.likeCount }}</p>
                    <p class="comments">评论数：{{ item.commentCount }}</p>
                </div>
            </div>

        </div>

        <!-- 发布帖子Form -->
        <el-dialog title="发布帖子" :visible.sync="dialogFormVisible">
            <el-form :model="postData">
                <el-form-item label="帖子标题" :label-width="formLabelWidth">
                    <el-input v-model="postData.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="帖子副标题" :label-width="formLabelWidth">
                    <el-input v-model="postData.subTitle" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="帖子分类" :label-width="formLabelWidth">
                    <el-select v-model="postData.sectionId" placeholder="请选择帖子分类">
                        <el-option :label="item.name" :value="item.id" v-for="(item, index) in categoryList"
                            :key="index"></el-option>
                        <!-- <el-option label="区域二" value="beijing"></el-option> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="帖子内容" :label-width="formLabelWidth">
                    <!-- <el-input v-model="postData.content" autocomplete="off"></el-input> -->
                     <textarea v-model="postData.content"></textarea>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    data() {
        return {
            categoryList: [],
            postList: [],
            postData: {
                title: "",
                sectionId: "",
                subTitle: "",
                content: "",
                pic: "",
            },
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px'
        }
    },
    computed: {
        username() {
            return this.$store.state.username;
        },
        ...mapState("username"),
    },
    methods: {
        init() {
            this.axios.get("/forum/home/category").then((res) => {
                // window.console.log(res)
                this.categoryList = res

            })

            this.axios.get("/forum/home/post").then((res) => {
                // window.console.log(res)
                this.postList = res
            })
        },
        findById(id) {
            this.axios.get(`/forum/home/post/${id}`).then((res) => {
                // window.console.log(res)
                this.postList = res
            })
        },
        findAll() {
            this.axios.get("/forum/home/post").then((res) => {
                // window.console.log(res)
                this.postList = res
            })
        },
        publishPost() {
            if(this.username==''){
                this.$router.push("/login")
            }else{
                this.dialogFormVisible = true;

            }
            
        },
        confirm() {
            this.dialogFormVisible = false;
            this.axios.post("/forum/home/add", this.postData).then((res) => {
                window.console.log(res)
                // window.console.log("发布成功")
                this.$message.success({
                    message: "发布成功"
                })
                this.postData.title = ''
                this.postData.subTitle = ''
                this.postData.pic = ''
                this.postData.content = ''
                this.postData.sectionId = ''
            });
            
        },
        gotoTheDetail(id){
            window.console.log(id)
            this.$router.push(`/chatDetail/${id}`)

        },
        

    },
    mounted() {
        this.init()
    }
}

</script>

<style>
body {

    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}


.box {
    width: 80%;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    box-sizing: border-box;
}


.Header {
    width: 100%;
    height: 60px;
    display: flex;
    background-color: #333;
    justify-content: space-around;
    align-items: center;
}


.nav-item {
    flex: 1;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 20px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


.nav-item:hover {
    background-color: #555;
}

.nav-post {
    background-color: #0099ff;
    border-radius: 5px;
    
}

.nav-post:hover {
    background-color: #0077cc;
}

.separator {
    height: 20px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
}

.item {
    width: 100%;
    height: 400px;
    display: flex;
    background-color: #f9f9f9;
    margin-bottom: 30px;
    border: 5px solid #cdcdcd;
    border-radius: 15px;
    box-sizing: border-box;

}


.item-l {
    flex: 2;
    background-color: #e0e0e0;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    position: relative; /* 添加相对定位 */
    overflow: hidden; /* 隐藏溢出部分 */
}

.item-img {
    /* max-width: 100%;
    max-height: 100%;
     */
    border-radius: 8px;
    position: absolute; /* 绝对定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 使用 cover 让图片覆盖容器 */
   
}

.item-r {
    flex: 1;
    padding: 20px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.item-r p {
    margin: 10px 0;
    font-size: 16px;
    color: #333;
}

.item-r .title {
    font-size: 24px;
    font-weight: bold;
    color: #222;
}

.item-r .time {
    color: #666;
}

.item-r .views,
.item-r .likes,
.item-r .comments {
    color: #888;
}


.item:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}
</style>